<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />

    <style>
      .main {
        /* width: 500px; */
        max-width: 600px;
        margin: 0 auto;
        height: 300px;
        background-color: aqua;
      }

      .simple {
        width: 500px;
        height: 100px;
        margin: 20px auto;
        background-color: aqua;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      .fancy {
        border-style: solid;
        width: 500px;
        margin: 40px auto;
        padding: 50px;
        height: 100px;
        border-width: 10px;
        border-color: red;
        background-color: aqua;

        /* border: solid blue 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box; */
      }

      .fancy2 {
        border-style: solid;
        width: 500px;
        margin: 20px auto;
        padding: 50px;
        height: 100px;
        /* border-width: 1rem;
            border-color: red;
            background-color: aqua; */

        border: solid blue 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      .static {
        position: static;
      }

      .relative1 {
        position: relative;
        float: left;
      }

      .relative2 {
        position: relative;
        /* top: -20px; */
        left: 20px;
        background-color: white;
        width: 500px;
      }

      .fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 200px;
        background-color: white;
      }

      /* .main {
            max-width: 600px;
            margin: 0 auto;
        } */
    </style>
  </head>

  <body>
    <h1 style="visibility: hidden">Hello, !</h1>
    <p style="display: none">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi eveniet itaque praesentium,
      delectus dicta et soluta. Qui,<span style="display: block">aaaa</span>
      deserunt omnis. Quas consectetur voluptate officiis voluptates! Explicabo ipsam tempore
      aperiam deleniti asperiores!
    </p>

    <div class="main"></div>

    <div class="simple">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ea rem sit quibusdam
      temporibus ipsum iure iste amet labore inventore. Aut, iste. Quia mollitia voluptas nemo aut
      laboriosam, inventore reiciendis?
    </div>

    <div class="fancy">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ea rem sit quibusdam
      temporibus ipsum iure iste amet labore inventore. Aut, iste. Quia mollitia voluptas nemo aut
      laboriosam, inventore reiciendis?
    </div>
    <div class="fancy2">Lorem ipsum dolor</div>

    <div class="static">
      static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static
      元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。
    </div>

    <div class="relative1">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat qui, perspiciatis iste
      similique odio illum harum placeat beatae, ipsam tempora animi nisi blanditiis obcaecati, quod
      repellat molestiae suscipit ad perferendis.
    </div>

    <div class="relative2">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem quis aperiam corrupti
      blanditiis inventore odio, laborum praesentium voluptatem vel quae a ipsa eum veritatis
      accusamus harum laboriosam rerum aut? Quaerat!
    </div>

    <div class="cla">
      <span class="fa-layers-text"> </span>
    </div>

    <div class="fixed">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure id obcaecati soluta quisquam
      eaque quas quibusdam itaque perferendis, officia minus aspernatur numquam dolore alias
      similique. Quaerat at consectetur ipsum impedit?
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
